<template>
  <div class="questionInfo" v-if="list.length > 0">
    <!-- 吸顶 -->
    <van-sticky>
      <hmNavBar
        title="刷题"
        path="/home/question"
        rightText="答题卡"
        @clickRight="clickRightEvent"
      >
      </hmNavBar>
    </van-sticky>
    <div class="content" v-if="list[currIndex].detail">
      <!-- 做一个v-if处理,有题目才渲染 -->
      <div class="title">
        【{{ typeObj[list[currIndex].detail.type] }}】
        {{ list[currIndex].detail.title }}
      </div>
      <!-- 上面内容 -->
      <div class="tag">
        <van-tag
          class="tag-item"
          color="#f7f4f5"
          text-color="#d2d0d5"
          v-for="(item, index) in list[currIndex].detail.tag"
          :key="index"
          >{{ item }}
        </van-tag>
      </div>
      <!-- 单选 -->
      <div class="select" v-if="list[currIndex].detail.type === 1">
        <!-- 绑定了一个class,选中后的效果,单选答案=当前选项对应的字符 -->

        <!-- 正确:当前答案answer有值,与当前答案==当前选项索引
           错误:当前选项就是自已的答案 选项 该答案还是错的 -->
        <!-- error: answer 有值与当前答案===当前选项 与 自己做错了isRight为false-->
        <div
          class="select-item"
          :class="{
            active: ans1 === str[index],
            error:
              list[currIndex].answer &&
              ans1 === str[index] &&
              !list[currIndex].answer.isRight,
            success:
              list[currIndex].answer &&
              list[currIndex].answer.singleAnswer === str[index]
          }"
          v-for="(item, index) in list[currIndex].detail.option"
          :key="index"
          @click="ans1Click(index)"
        >
          <!-- 绑定一个点击事件,并传递实参当前项的索引 -->

          {{ str[index] }}.{{ item }}
        </div>
      </div>

      <!-- 多选 -->
      <!-- 多选不管错误  ans2=[A,B,C] 
         success:
         list[currIndex].answer &&
         list[currIndex].answer.multipleAnswer.includes(str[index])
      -->

      <div class="select" v-else-if="list[currIndex].detail.type === 2">
        <div
          class="select-item"
          :class="{
            active: ans2.includes(str[index]),
            success:
              list[currIndex].answer &&
              list[currIndex].answer.multipleAnswer.includes(str[index])
          }"
          v-for="(item, index) in list[currIndex].detail.option"
          :key="index"
          @click="ans2Click(index)"
        >
          {{ str[index] }}.{{ item }}
        </div>
      </div>
      <!-- 简答 -->
      <div class="select" v-else>
        <van-field
          class="field"
          v-model="ans3"
          type="textarea"
          rows="5"
          @input="ans3Event"
          :disabled="step >= 2"
        >
          <!-- :disabled="step>=2" 只有在step=0 1 才可以输入-->
        </van-field>
      </div>

      <!-- 答案 -->
      <div class="answer" v-if="step > 1">
        <!-- step>1才显示答案 -->
        <h3 class="a1">答案解析</h3>
        <div class="a2" v-if="list[currIndex].detail.type === 1">
          正确答案:{{ list[currIndex].answer.singleAnswer }}
        </div>
        <div class="a2" v-else-if="list[currIndex].detail.type === 2">
          正确答案:{{ list[currIndex].answer.multipleAnswer }}
        </div>
        <div class="a2" v-else>
          正确答案:
        </div>
        <div class="a3">
          <div class="a3-1">
            难度:{{ diffObj[list[currIndex].answer.difficulty] }}
          </div>
          <div class="a3-2">
            提交次数:{{ list[currIndex].answer.submitNum }}
          </div>
          <div class="a3-3">
            正确次数:{{ list[currIndex].answer.correctNum }}
          </div>
        </div>
        <div class="a4">
          {{ list[currIndex].answer.answerAnalysis }}
        </div>
      </div>
    </div>

    <!-- footer -->
    <div class="footer">
      <div class="f1">
        <div class="iconfont">&#xe611;</div>
        <div>收藏</div>
      </div>
      <div class="f1">
        <div class="iconfont">&#xe606;</div>
        <div>反馈</div>
      </div>
      <div class="f2">{{ currIndex + 1 }}/{{ list.length }}题目</div>
      <div class="f3">
        <van-button
          color="red"
          v-if="step < 2"
          :disabled="step == 0"
          @click="submit"
        >
          提交 </van-button
        ><!-- step=0 禁用 =1可点击 -->
        <van-button color="red" v-else-if="step === 2" @click="next">
          下一题 </van-button
        ><!--=2 出现下一题 -->
        <van-button color="red" v-else> 结束 </van-button
        ><!--3 结束 -->
      </div>
    </div>

    <!-- 答题卡
        van-popup
            v-model:是否显示
            position:位置   
     -->
    <van-popup v-model="isShow" position="bottom" class="popup">
      <hmNavBar title="答题卡" :showIcon="false" rightText="49/233题">
      </hmNavBar>
      <div class="card_a">单择题 <span class="card_b">共150题</span></div>
      <ul class="card">
        <li
          class="card-item"
          :class="{
            'card-error': item.answer && !item.answer.isRight,
            'card-success': item.answer && item.answer.isRight
          }"
          v-for="(item, index) in list"
          :key="index"
          @click="skip(index)"
        >
          {{ index + 1 }}
        </li>
        <!-- <li class="noUse"></li>
        <li class="noUse"></li>
        <li class="noUse"></li>
        <li class="noUse"></li>
        <li class="noUse"></li>
        <li class="noUse"></li>
        <li class="noUse"></li> -->
      </ul>
    </van-popup>
  </div>
</template>

<script>
import {
  interviewQuestions,
  questionsSubmit,
  getQuestionsInfo
} from '@/api/question'

export default {
  data () {
    return {
      /* 获取路由传参city与type进行存储 */
      type: this.$route.query.type,
      city: this.$route.query.city,
      step: 0, //0获取题目  但没有答题  1:表示已经答题,但还没有点击提交   2.已提交,但不是最后一题   3.已提交且是最后一题
      list: [], //所有题目数据
      currIndex: 0, //代表目前是第几题
      isShow: false,
      typeObj: {
        1: '单选',
        2: '多选',
        3: '简答'
      },
      diffObj: {
        1: '简单',
        2: '一般',
        3: '复杂'
      },
      str: 'ABCDEFGHI',
      ans1: '', //单选题答案
      ans2: [], //多选题答案
      ans3: '' //简答题答案
    }
  },
  /* 获取面试题 */
  async created () {
    const res = await interviewQuestions({
      type: this.type,
      city: this.city
    })
    this.list = res.data.data
    window.console.log(' 获取面试题', res)
  },
  methods: {
    /* 单选点击  单选答案=当前索引对应字符*/
    ans1Click (index) {
      if (this.step < 2) {
        this.ans1 = this.str[index]
        /* 单选点击只允许<2的阶段点击,表示某个选项后,表示有答案,让step=1 让阶段值有一个相应变化*/
        this.step = 1
      }
    },
    /* 提交答案 */
    async submit () {
      /* 调用提交接口 */
      const res = await questionsSubmit({
        id: this.list[this.currIndex].id,
        singleAnswer: this.ans1,
        multipleAnswer: this.ans2
      })
      window.console.log('提交接口', res)
      if (this.list.length === this.currIndex + 1) {
        //所有题目的长度===当前题目时证明是最后一题
        this.step = 3 //已提交且是最后一题
      } else {
        this.step = 2 //等于二显示下一题
      }
      /* 保存答案 */
      this.list[this.currIndex].answer = res.data.data //保存答案,到数组相应地方
      window.console.log('已保存答案', this.list[this.currIndex])
    },
    /* 下一题 */
    async next () {
      //下一题优化:点击下一题时,直接使用skip处理,因为skip所有情况都考虑到了
      this.currIndex++
      this.skip(this.currIndex)
      //点击下一题时,数据还原
      //   this.step = 0
      //   this.ans1 = '' //单选题答案
      //   this.ans2 = [] //多选题答案
      //   this.ans3 = '' //简答题答案
      //   this.currIndex++
      //   /* 调用api获取题目 */
      //   const res = await getQuestionsInfo(this.list[this.currIndex].id)
      //   /* this.list[this.currIndex].detail=res.data.data */
      //   this.$set(this.list[this.currIndex], 'detail', res.data.data) //将数据通过$set添加到数组对 应索引下的对象中
      //   window.console.log('list', this.list)
    },

    /* 多选点击处理 */
    ans2Click (index) {
      if (this.step < 2) {
        /* 如果以前选中过该项,现在再选中是取消(删除数组中该项目) */
        if (this.ans2.includes(this.str[index])) {
          //删除该项
          const _index = this.ans2.indexOf(this.str[index])
          this.ans2.splice(_index, 1)
        } else {
          /* 如果以前没选中,添加该项 */
          this.ans2.push(this.str[index])
        }
        if (this.ans2.length > 0) {
          this.step = 1 //有值
        } else {
          this.step = 0 //无值
        }
      }
    },
    /* 简答题输入答案 */
    ans3Event () {
      if (this.ans3.length > 0) {
        //输入框input处理,如果没输入,step=0,输入了就step=1
        this.step = 1
      } else {
        this.step = 0
      }
    },

    /* 跳转回哪一题 */
    async skip (index) {
      this.isShow = false

      this.ans1 = '' //单选题答案
      this.ans2 = [] //多选题答案
      this.ans3 = '' //简答题答案
      this.currIndex = index //当前为第几题

      /* 没有题目 */
      if (!this.list[index].detail) {
        this.step = 0
        /* 调用api获取题目 */
        this.$toast.loading({
          duration: 0
        })
        const res = await getQuestionsInfo(this.list[this.currIndex].id)
        /* this.list[this.currIndex].detail=res.data.data */
        this.$toast.clear()
        this.$set(this.list[this.currIndex], 'detail', res.data.data) //将数据通过$set添加到数组对 应索引下的对象中
      } else {
        /* 有题目没有答案 */
        if (!this.list[index].answer) {
          this.step = 0
        } else {
          /* 有题目有答案 */

          /* 是最后一题 step=3   不是最后一题 step=2 */
          if (this.list.length === index + 1) {
            this.step = 3
          } else {
            this.step = 2
          }
        }
      }
    },

    /* 点击答题卡 */
    clickRightEvent () {
      this.isShow = true
    }
  }
}
</script>

<style lang="less" scoped>
.questionInfo {
  padding-bottom: 60px;
  .content {
    padding: 18px;
    .title {
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: justify;
      color: #181a39;
      line-height: 23px;
    }
    .tag {
      padding: 15px 0;
      .tag-item {
        padding: 5px 7px;
        border: 1px solid #dfddde;
        margin-right: 10px;
      }
    }
    .select {
      margin-top: 10px;
      .select-item {
        margin-bottom: 20px;
        border: 1px solid #dfddde;
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: justify;
        color: #181a39;
        line-height: 50px;
        width: 325px;
        height: 50px;
        background: #ffffff;
        border: 1px solid #f7f4f5;
        border-radius: 4px;
        text-align: left;
      }
      .field {
        background-color: #ccc;
      }
      .active {
        border: 1px solid #000;
      }
      .error {
        background-color: #ffefea;
      }
      .success {
        background-color: #ddfad9;
      }
    }
    .answer {
      border-top: 1px solid #e9e9e9;
      .a1 {
        margin-top: 15px;
        font-size: 18px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 600;
        text-align: left;
        color: #222222;
        line-height: 25px;
        letter-spacing: 0px;
      }
      .a2 {
        margin-top: 15px;
        margin-bottom: 15px;
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: justify;
        color: #1dc779;
        line-height: 23px;
      }
      .a3 {
        margin-bottom: 15px;
        width: 100%;
        height: 32px;
        background: #f7f4f5;
        border-radius: 4px;
        display: flex;
        border-bottom: 1px solid #ededed;
        border-top: 1px solid #ededed;
        font-size: 12px;

        font-weight: 400;
        text-align: left;
        color: #545671;
        line-height: 32px;
        .a3-1,
        .a3-2,
        .a3-3 {
          flex: 1;
        }
        .a3-1 {
          padding-left: 5px;
        }
      }
      .a4 {
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: justify;
        color: #181a39;
        line-height: 23px;
      }
    }
  }
  .footer {
    display: flex;
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 15px;
    width: 100%;
    height: 60px;
    text-align: center;
    align-items: center;
    font-size: 12px;
    background: #ffffff;
    color: #ccc;
    .f1 {
      flex: 1;
      .iconfont {
        font-size: 28px;
      }
    }
    .f2 {
      flex: 2;
      color: #000;
      font-size: 18px;
    }
    .f3 {
      flex: 2;
    }
  }
  .card_a {
    background-color: #f7f4f5;
    width: 100%;
    padding: 15px;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Semibold;
    font-weight: 600;
    text-align: left;
    color: #222222;
    line-height: 23px;
    letter-spacing: 0px;
    .card_b {
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #b4b4bd;
      line-height: 20px;
      letter-spacing: 0px;
    }
  }
  .popup {
    margin-top: 50px;
  }
  .card {
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;
    .card-item {
      width: 33px;
      height: 33px;
      margin: 5px 10px;
      //  margin: 10px;//可以直接用此方法,去掉上面的justify-content: space-between;
      /* 尝试老师做法,用 justify-content: space-between; ,下面再排个noUse样式 */
      text-align: center;
      //   margin: 7px 5px;
      background: #ffffff;
      border: 1px solid #b4b4bd;
      border-radius: 50%;
      font-size: 15px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      line-height: 33px;
    }
    .card-error {
      background-color: #ffefea;
    }
    .card-success {
      background-color: #ddfad9;
    }
  }
  // .noUse{
  //     width: 33px;
  //     height: 0;
  //     margin: 7px 5px;
  // }
}
</style>
